<template>
  <div>
    <div style="text-align: center">
      <h2>
        <span :style="{ color: tips.color }">{{ tips.checkTips }}</span>
      </h2>
    </div>
    <div id="components-form-demo-advanced-search">
      <a-form-model class="ant-advanced-search-form" ref="form" :model="certification" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="分站：" prop="siteId">
              <a-select
                placeholder="请选择分站"
                v-model="certification.siteId"
                show-search
                :showArrow="false"
                allowClear
                :filter-option="filterSelectOption"
                :disabled="edit.editFlag"
              >
                <a-select-option value="" disabled selected>请选择分站</a-select-option>
                <a-select-option v-for="item in siteList" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="姓名：" prop="name">
              <a-input v-model="certification.name" placeholder="请输入姓名" prop="name" :disabled="edit.editFlag" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="身份证件号码：" prop="idcard">
              <a-input v-model="certification.idcard" placeholder="请输入身份证件号码" :disabled="edit.editFlag" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="手机号" prop="mobile"
              ><!-- 商家手机号默认为注册时使用的手机号，不可修改 -->
              <a-input v-model="certification.mobile" placeholder="请输入手机号" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6"
            ><!-- 1外卖店、2家政服务    逗号隔开  -->
            <a-form-model-item label="类型：" prop="type">
              <j-multi-select-tag
                dict-code="shop_type"
                v-model="certification.type"
                placeholder="请选择类型"
                :disabled="edit.editFlag"
              ></j-multi-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item label="提现人支付宝姓名：" prop="aliname">
              <a-input v-model="certification.aliname" placeholder="请输入提现人支付宝姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="7">
            <a-form-model-item label="提现人支付宝账号：" prop="alipay">
              <a-input v-model="certification.alipay" placeholder="请输入提现人支付宝账号" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="text-align: center">
            <p style="margin-bottom: 10px">请上传身份证人像面：</p>
            <h4 style="font-size: 0.8vw; color: red" v-show="noImage1">图片不能为空</h4>
            <j-image-upload
              :accept-format="upload.format"
              v-model="certification.frontIdcardUrl"
              :disabled="edit.editFlag"
            ></j-image-upload>
          </a-col>
          <a-col :span="8" style="text-align: center">
            <p style="margin-bottom: 10px">请上传身份证国徽面：</p>
            <h4 style="font-size: 0.8vw; color: red" v-show="noImage2">图片不能为空</h4>
            <j-image-upload
              :accept-format="upload.format"
              v-model="certification.backIdcardUrl"
              :disabled="edit.editFlag"
            ></j-image-upload>
          </a-col>
          <a-col :span="8" style="text-align: center">
            <p style="margin-bottom: 10px">请上传手持身份证照片：</p>
            <h4 style="font-size: 0.8vw; color: red" v-show="noImage3">图片不能为空</h4>
            <j-image-upload
              :accept-format="upload.format"
              v-model="certification.handHeldIdcardUrl"
              :disabled="edit.editFlag"
            ></j-image-upload>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right', paddingTop: '40px' }">
            <span style="color: red">{{ tips.checkTipsDown }}</span>
            <!--:disabled="(edit.editFlag||edit.aliEditFlag)?false:true"-->
            <a-button type="primary" v-show="certification.state != 1" :loading="loadingSubmit" @click="submit"
              >提交审核</a-button
            >
            <a-button type="primary" v-show="certification.state == 1" :loading="loadingSubmit" @click="submit"
              >修改支付信息</a-button
            >
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin.js'
import { getSmsCaptcha } from '@/api/login'
import { getAction, postAction, httpAction } from '@/api/manage'
import { checkOnlyUser } from '@/api/api'
import store from '@/store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'

export default {
  name: "Certification",
  components: {
  },
  mixins: [mixinDevice],
  data() {
    return {
      certification: {
        id: "",
        siteId: "",
        name: "",
        idcard: "",
        mobile: store.getters.userInfo.phone,
        type: "",
        aliname: "",
        alipay: "",
        frontIdcardUrl: "",
        backIdcardUrl: "",
        handHeldIdcardUrl: "",
        state: -1
      },
      noImage1: false,
      noImage2: false,
      noImage3: false,
      edit: {
        aliEditFlag: false,
        editFlag: false,
      },
      tips: {
        color: "black",
        checkTips: "您尚未进行实名认证，请填以下信息进行商家实名认证"
      },
      form: this.$form.createForm(this, { name: 'certificationForm' }),
      validatorRules: {
        name: [{ required: true, message: '请输入姓名' }],
        siteId: [{ required: true, message: '请选择所属分站' }],
        idcard: [{ required: true, message: '请输入身份证件号码', trigger: ['blur', 'change'] },
        {
          pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          message: '请输入正确的身份证号',
          trigger: ['change', 'blur']
        }],
        type: [{ required: true, message: '请选择类型' }],
        aliname: [{ required: true, message: '请填写提现人支付宝姓名' }],
        alipay: [{ required: true, message: '请填写提现人支付宝账号' }],
        mobile: [{ required: true, message: '请填写商家手机号' }]
      },
      upload: {
        previewVisible: false,
        previewImage: "",
        format: ".jpg,.jpeg,.png"
      },
      siteList: [],
      url: {
        siteList: "/merchant/certification/allSite",
        edit: "/merchant/certification/edit",
        findByUserId: "/merchant/certification/findByUserId"
      },
      headers: {
        authrization: 'authorization-text'
      },

      loadingSubmit: false,//提交信息  loading
    };
  },
  computed: {

  },
  created() {
    this.getSiteList();
    this.findByUserId();
  },
  updated() {
    console.log('updated');
  },
  methods: {
    findByUserId() {
      const self = this;
      getAction(self.url.findByUserId).then(res => {
        console.log(res);
        if (res.success) {
          if (!res.result) {
            return;
          }
          self.certification = res.result;
          console.log("self.certification---->  ", self.certification)
          if (self.certification.state == 0) {
            self.edit.editFlag = true;
            self.edit.aliEditFlag = true;
            self.tips.checkTips = "已提交实名信息，等待分站审核(已提交的实名认证信息不允许修改，如需修改，请联系分站将实名信息退回)";
            self.tips.color = "red";
          }
          if (self.certification.state == 1) {
            self.edit.editFlag = true;
            self.edit.aliEditFlag = false;  // 通过审核的实名认证信息可以修改支付宝提现信息
            self.tips.checkTips = "恭喜您！您的实名认证信息已通过审核";
            self.tips.color = "green";
          }
          if (self.certification.state == -1) {
            self.edit.editFlag = false;
            self.edit.aliEditFlag = false;
            self.tips.checkTips = "您的实名认证信息已退回，请您修改信息后再次进行提交";
            self.tips.color = "red";
          }
          if (self.certification.state == -2) {
            self.edit.editFlag = false;
            self.edit.aliEditFlag = false;
            self.tips.checkTips = "很遗憾！您的实名认证信息未通过审核，请您修改信息后再次进行提交";
            self.tips.color = "black";
          }
        } else {
          console.log("没有查询到内容……")
        }
      });
    },
    getSiteList() {
      const self = this;
      getAction(self.url.siteList).then(res => {
        if (res.success) {
          self.siteList = res.result;
        }
      });
    },
    submit() {
      let that = this
      console.log("this.certification.siteId", this.certification.siteId);
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.certification.frontIdcardUrl && this.certification.backIdcardUrl && this.certification.handHeldIdcardUrl) {
            if (this.certification.state != 1) {
              this.certification.state = 0;
            }
            this.noImage1 = false;
            this.noImage1 = false;
            this.noImage1 = false;
            this.loadingSubmit = true
            postAction(this.url.edit, this.certification).then((res) => {
              console.log(res)
              if (res.success) {
                this.findByUserId();
                setTimeout(() => {
                  that.loadingSubmit = false
                }, 500)
              } else {
                this.tips.checkTips = res.message;
                this.tips.color = "red";
                this.certification.idcard = "";
                setTimeout(() => {
                  that.loadingSubmit = false
                }, 500)
              }
            }).catch(() => {
              setTimeout(() => {
                that.loadingSubmit = false
              }, 500)
              console.log('提交失败')
            });
          } else {
            this.noImage1 = false;
            this.noImage1 = false;
            this.noImage1 = false;
            if (!this.certification.frontIdcardUrl) {
              this.noImage1 = true;
            }
            if (!this.certification.backIdcardUrl) {
              this.noImage2 = true;
            }
            if (!this.certification.handHeldIdcardUrl) {
              this.noImage3 = true;
            }
          }
        }
      });
    },
    filterSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
<style lang="less">
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.img .ant-upload-picture-card-wrapper {
  width: auto;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
</style>